.report-sidebar: p A sidebar will always make your document look nicer !

h1#title Beautiful PDF documents with web technologies

.summary.ui.piled.segment: span.

  We tend to prefer mark-up languages (Markdown, LaTeX, etc.) to interfaced document editors like MS Office or Google Docs, because they make it easier to quickly write documents with consistent style. However, Markdown is limited to the title/sections/paragraphs structure, and LaTeX has obscure syntax and errors that also make it difficult to go off the beaten tracks.
  This report introduces ReLaXed, a solution using Pug and SCSS for document definition and Google Chrome for rendering.

:markdown-it

  ## Web technologies have never looked so good
  
  Plenty of CSS frameworks will make sure your documents will look clean and modern. Javascript frameworks can plot schemas, highlight code, or render maths equations the same way LaTeX does. Millions of people (and growing) are now fluent in these technologies. Shorthand languages like Pug and SCSS are finally making it fun to write HTML and CSS. (Headless) web browsers can easily turn all these technologies into PDF, on any platform.
  
  As an illustration, it took just one line to import the Semantic UI framework and style this document. Now look at this gorgeous table (don't pay attention to the content, it's place-holder)


figure.block-center.width-15cm
  table.ui.celled.table
    thead
      tr
        th Feature
        th Framework
        th Notes
    tbody
      tr
        td Mathematical equations
        td MathJax
        td.positive #[i.icon.checkmark] Totally working
      tr
        td Plots
        td Vegalite
        td Needs testing
      tr.negative
        td Simple installation
        td NPM
        td #[i.icon.close] Problematic
      tr
        td Flowcharts
        td Mermaid.js
        td.positive #[i.icon.checkmark] Beautifully working
  figcaption
    .reference Table 1
    .caption.
      There is not much to say about this table but hey this is a caption. Captions are cool.
          
p Here is another cool component provided by Semantic UI:  
.ui.container
  .ui.icon.message.yellow.block-center
    i.lightbulb.outline.icon
    .content
      .header Give it a try !
      p
      | The ReLaXed homepage is at 
      a(href='https://github.com/RelaxedJS/ReLaXed') github.com/RelaxedJS/ReLaXed

figure.float-left.width-8cm.ui.raised.segment
  .panel
    .label A
    include diagrams/plot.svg
  .panel
    .label B
    .top-5mm
      include diagrams/diagram.svg

  figcaption
    .reference Figure 1
    .title Examples of graphics generated by web frameworks.
    .caption.
      This also demonstrates figure composition into panels - suck it, markdown !
      #[b A. ] Graph defined as a JSON and transformed to SVG using Vega-lite and Chrome.
      #[b B. ] Graph generated using Mermaid and Chrome.

:markdown-it(html=true)
  Next we will have a look at some differences between ReLaXed and other frameworks.

  ## ReLaXed vs other solutions

  Here are a few highlights of what you may win, or lose, using ReLaXed instead
  of another solution. This section is of course open to contributions.

  Let us start with Markdown. This widely supported language (Github, NPM, etc.)
  became very popular due to its simple and friendly syntax close to plain text.
  Markdown also has cool editors and extensions. One example is
  [``markdown-preview-enhanced``](https://atom.io/packages/markdown-preview-enhanced)
  which can render plots, flowcharts, and equations.

  ReLaXed has been specially extended so that it could support plot, flowchart,
  and equations (using the same underlying libraries as
  markdown-preview-enhanced), as illustrated in Figure 1. In addition, ReLaXed
  allows you to write any kind of layout with boxes, sidebars, etc. HTML
  elements are more fun to write with Pug (in markdown, HTML elements must be
  written in plain HTML). You can define macros, use conditionals and loops, use
  computed expressions using Javascript , and ReLaXed supports (S)CSS which is
  pretty cool. Last but not least, you can write parts in markdown if you want
  to <i class="em em-wink"></i> . Yep, that was an emoji. Cost us one line of
  code, to import [Emoji CSS](https://afeld.github.io/emoji-css/) as a
  stylesheet.

  Now what about LaTeX ? Sure, LaTeX is wide-spread in academic and publishing
  communities, where it's typography and layout optimizations, and its
  bibliography management tool are very appreciated. But LaTeX is also known for
  its cryptic errors, its complex advanced syntax which not many make the effort
  to learn, and as a consequence not many LaTeX venture on the creative side
  with their own themes and layouts.

  Certainly the letter and paragraph spacings won't be as nice in ReLaXed (but
  Google Chrome is still doing a very good job), but the syntax, clear error
  messages, etc. will certainly make  you happier. ReLaXed is also possibly
  faster to render big documents (not entirely sure though <i class="em
  em-thinking_face"></i>).

template#page-footer
  style(type='text/css').
    .pdfheader {
      font-size: 10px;
      font-family: Helvetica;
      font-weight: bold;
      width: 1000px;
      border-top: 1px solid black;
      margin-left: 10%;
      margin-right: 10%;
      padding-top: 1mm;
      margin-bottom: -1mm;
      text-align: center;
    }
  
  .pdfheader Page #[span.pageNumber] / #[span.totalPages]

style
  include:scss report.scss
